<template>
    <div class="subjectivity-container">
        <el-card class="question-container" shadow="never" v-for="item, index in data" :key="item.id">
            <div class="title-contianer">
                <div class="head">
                    <el-text class="title">题目{{ index * 1 + 1 }}</el-text>
                </div>
                <el-divider style="margin: 0;"></el-divider>
                <div class="item-block" style="padding-top: 16px;">
                    <div v-html="item.stem">
                    </div>
                    <div v-if="item.imgUrl">
                        <el-image :src="item.imgUrl"></el-image>
                    </div>
                </div>
            </div>
            <div class="answer-container">

                <!-- 回答 -->
                <div class="item-block user-text" v-if="item.select">
                    <el-text>用户答案：</el-text>
                    <div>
                        <p>{{ item.select }}</p>
                    </div>
                </div>
                <!-- 附件 -->
                <div class="item-block user-file" v-if="item.annexUrl">
                    <el-text>用户附件：</el-text>
                    <div class="user-file-desc">
                        <span>{{ item.annexUrl }}</span>
                        <span>
                            <el-link @click="handleDownloadFile(item.annexUrl)">下载</el-link>
                        </span>
                    </div>
                </div>
                <div class="item-block user-file" v-else>
                    <el-text>用户附件：</el-text>
                    <span>未上传</span>
                </div>

            </div>
            <div class="score-container">
                <el-input-number :controls="false" v-model="content[item.subjectId]" :min="0" :max="item.score"
                    placeholder="评分">
                    <template #prepend>评分</template>
                    <template #append>分</template>
                </el-input-number>

                <el-text>（分值：{{ item.score }}）</el-text>
            </div>
        </el-card>

        <el-empty v-if="data.length == 0"></el-empty>

        <div class="btns-container">
            <el-button type="primary" size="large" @click="handleUpdateSubjectivityScore"
                :disabled="data.length == 0">确认批改完成</el-button>
        </div>
    </div>
</template>
<script setup >
import { UpdateSubjectivityScore } from '@/api/gradingTeacher';
import { download } from '@/utils/downLoad';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
const props = defineProps({
    data: {
        default: () => [],
        type: Array
    }
})
const emit = defineEmits(['close'])
const content = ref({

})

/**
 * 提交
 */
const handleUpdateSubjectivityScore = async () => {

    let questions_data = JSON.parse(JSON.stringify(content.value));

    let arr = [];
    for (let key in questions_data) {
        arr.push({
            id: key,
            score: questions_data[key]
        })
    }
    if (arr.length == 0) {
        // TODO 提示
        ElMessage.error("存在未批阅的主观题")
        return;
    }
    if (arr.length < props.data.length) {
        ElMessage.error("存在未批阅的主观题")
        return;
    }
    let res = await UpdateSubjectivityScore({
        esId: props.data[0].esId,
        json: JSON.stringify(arr)
    });
    if (!res.success) {
        // TODO 提示 res.message
        ElMessage.error(res.message)
        return
    }
    emit('close')
}

const handleDownloadFile = (url) => {
    const Host = import.meta.env.VITE_APP_HOST;
    download(url.pop, Host + url, 'url')
}
onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped>
.subjectivity-container {
    .question-container {
        margin-top: 16px;

        .title-contianer {
            padding-bottom: 16px;

            .head {
                display: flex;
                padding-bottom: 16px;

                .title {
                    font-size: 20px;
                }
            }

            .item-block {
                padding-left: 16px;
            }
        }

        .answer-container {
            padding-top: 16px;
            padding-bottom: 16px;

            .head {
                padding-bottom: 16px;
            }

            .item-block {
                padding-left: 16px;
            }

            .user-text {
                >div {
                    margin-top: 16px;
                }
            }

            .user-file {
                padding-top: 16px;

                .user-file-desc {
                    margin-top: 16px;
                    width: 100%;
                    padding: 8px 16px;
                    box-sizing: border-box;
                    border-radius: 4px;
                    display: flex;
                    justify-content: space-between;
                    background-color: #eee;
                }
            }
        }

        .score-container {
            display: flex;

            .el-input {
                width: 256px;
            }
        }
    }

    .btns-container {
        padding-top: 32px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}
</style>